<template>
  <div class="conditionBox">
<!--    <div class="conditionRow">
      <span>地区</span>
      <el-select v-model="searchForm.provinceId" class="w90">
        <el-option
          v-for="item in provinces"
          :key="item.listKey"
          :label="item.listValue"
          :value="item.listKey">
        </el-option>
      </el-select>
    </div> -->
    <div class="conditionRow">
      <span>代理商</span>
      <el-select v-model="searchForm.agentId" class="w120" @change="changeAgent">
        <el-option
          v-for="item in agents"
          :key="item.listKey"
          :label="item.listValue"
          :value="item.listKey">
        </el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <span>区域</span>
      <el-select v-model="searchForm.areaId" class="w120" @change="changeArea">
        <el-option
          v-for="item in areas"
          :key="item.listKey"
          :label="item.listValue"
          :value="item.listKey">
        </el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <span>市场成员</span>
      <el-select v-model="searchForm.marketer" class="w90">
        <el-option
          v-for="item in marketers"
          :key="item.listKey"
          :label="item.listValue"
          :value="item.listKey">
        </el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <span>类型</span>
      <el-select v-model="searchForm.buyerType" class="w90">
        <el-option
          v-for="item in buyerTypes"
          :key="item.listKey"
          :label="item.listValue"
          :value="item.listKey">
        </el-option>
      </el-select>
    </div>
    <div class="conditionRow" v-show="schoolType[searchForm.buyerType]">
      <span>是否公立</span>
      <el-select class="w90 mL10" v-model="searchForm.scType">
        <el-option label="请选择" value=""></el-option>
        <el-option label="公立" value="PUBLIC"></el-option>
        <el-option label="私立" value="PRIVATE"></el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <span>部门状态</span>
      <el-select v-model="searchForm.state" class="w90">
        <el-option label="全部" value=""></el-option>
        <el-option label="正常" value="TRUE"></el-option>
        <el-option label="禁用" value="FALSE"></el-option>
      </el-select>
    </div>
    <div class="conditionRow">
      <el-input style="width: 240px;" v-model="searchForm.byName" @keyup.enter="searchForm.pageNumber = 1; getTableData()" placeholder="采购商名称/联系电话/登录名"></el-input>
    </div>
    <el-button type="primary" @click="searchForm.pageNumber = 1; getTableData()">搜索</el-button>
  </div>
  <div v-loading="loading">
    <div class="tabBox">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="序号" fixed >
          <template v-slot="{ $index }">
            {{ indexMethod($index)}}
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="buyerName" width="100" fixed show-overflow-tooltip />
        <el-table-column label="区域" prop="areaName" />
        <el-table-column label="代理商" prop="deptName" width="120" />
        <el-table-column label="市场人员" prop="realName" />
        <el-table-column label="负责人" prop="legalPerson" width="100" show-overflow-tooltip />
        <el-table-column label="联系电话" prop="tel" width="120" />
        <el-table-column label="关联配送商" prop="dlrNum" width="120" />
        <el-table-column label="上次采购时间" prop="date" width="140" />
        <el-table-column label="注册时间" prop="registTime" width="140" />
        <el-table-column label="地址" prop="address" width="140" show-overflow-tooltip />
        <el-table-column label="是否接收短信" prop="isSend" width="120">
          <template v-slot="{ row }">
            {{ row.isSend == 'TRUE' ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="部门状态" prop="state">
          <template v-slot="{ row }">
            <span v-if="row.state == 'TRUE'">正常</span>
            <span v-else style="color: #FF0000;">禁用</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" width="80" align="center">
          <template v-slot="{ row }">
            <el-dropdown @command="command => operate(row, command)" max-height="266px">
              <el-button type="text">操作</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="gotoDetail">查看信息</el-dropdown-item>
                  <el-dropdown-item command="updateDetail">修改信息</el-dropdown-item>
                  <el-dropdown-item command="updateAccount">变更账户</el-dropdown-item>
                  <el-dropdown-item command="updateHealth">健康证</el-dropdown-item>
                  <el-dropdown-item command="updateCamera">摄像头配置</el-dropdown-item>
                  <el-dropdown-item command="updateState">{{ row.state == 'TRUE' ? '禁用' : '启用' }}</el-dropdown-item>
                  <el-dropdown-item command="updateUserType">{{ row.isTest == 'FALSE' ? '转为测试用户' : '转为正式用户' }}</el-dropdown-item>
                  <el-dropdown-item command="updateSendState">{{ row.isSend == 'TRUE' ? '关闭短信' : '开通短信' }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageContainer">
      <el-pagination
        hide-on-single-page
        v-model:currentPage="searchForm.pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        v-model:page-size="searchForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="searchForm.pageNumber = 1; getTableData()"
        @current-change="getTableData">
      </el-pagination>
    </div>
  </div>
  <!-- 修改采购商 -->
  <update-info ref="elUpdateInfo" @confirm="getTableData"></update-info>
  <update-account ref="elUpdateAccount"></update-account>
  <update-health ref="elUpdateHealth"></update-health>
  <update-camera ref="elUpdateCamera"></update-camera>
</template>

<script setup>
  
  import {
    reactive,
    ref,
    inject
  } from 'vue';
  
  import UpdateInfo from './components/update-info.vue'
  import UpdateAccount from './components/update-account.vue'
  import UpdateHealth from './components/update-health.vue'
  import UpdateCamera from './components/update-camera.vue'
  
  const $post = inject('$post');
  const $router = inject('$router');
  const $confirm = inject('$confirm');
  const $message = inject('$message');
  
  const searchForm = reactive({
    pageNumber: 1,
    pageSize: 10,
    // 地区
    provinceId: '',
    // 代理商
    agentId: '',
    // 区域
    areaId: '',
    // 市场人员
    marketer: '',
    // 搜索条件
    byName: '',
    // 类型
    buyerType: '',
    // 是否公立
    scType: '',
    // 状态
    state: ''
  })
  
  // 学校类型
  const schoolType = {
    'KINDSC': true,
    'PRISC': true,
    'MIDSC': true,
    'HIGSC': true,
    'UNVSC': true
  };
  
  const loading = ref(false);
  const tableData = ref([]);
  
  const total = ref(0);
  
  // 获取表格
  const getTableData = () => {
    loading.value = true;
    $post('/consumer/buyerPage', searchForm).then(res => {
      tableData.value = res.data;
      total.value = res.pageObj.totalRecords;
    }).finally(_ => loading.value = false);
  }
  getTableData();
  
  const indexMethod = idx => (searchForm.pageNumber - 1) * searchForm.pageSize + idx + 1
  
  // 操作
  const operate = (row, command) => {
    operateFn[command](row);
  }
  // 操作的方法
  const elUpdateInfo = ref();
  const elUpdateAccount = ref();
  const elUpdateHealth = ref();
  const elUpdateCamera = ref();
  const operateFn = {
    gotoDetail: function (row) {
      $router.push({
        path: '/operation/consumer-manage/detail',
        query: {
          guid: row.guid,
          registTime: row.registTime
        }
      })
    },
    updateDetail: function (row) {
      elUpdateInfo.value.show(row.guid);
    },
    updateAccount: function (row) {
      elUpdateAccount.value.show(row.guid);
    },
    updateHealth: function (row) {
      elUpdateHealth.value.show(row.guid);
    },
    updateCamera: function (row) {
      elUpdateCamera.value.show(row.guid);
    },
    // 更新部门状态
    updateState: function (row) {
      let flag = row.state == 'TRUE';
      let state = flag ? 'FALSE' : 'TRUE';
      $confirm(flag ? '禁用过后该采购商下面所有用户无法登录,确定要禁用吗?'
      : '确定启用该采购商吗?', '提示').then(_ => {
        $post('/consumer/updateDeptStatus', {
          deptId: row.guid,
          state
        }).then(_ => {
          row.state = state;
          $message.success('操作成功');
        })
      });
    },
    // 正式和测试用户切换
    updateUserType: function (row) {
      let flag = row.isTest == 'FALSE';
      let state = flag ? 'TRUE' : 'FALSE';
      $confirm(flag ? '确定将该采购商转为测试用户吗?'
      : '确定启用该采购商吗?', '提示').then(_ => {
        $post('/consumer/updateIsTest', {
          guid: row.guid,
          type: 'BUYER',
          state
        }).then(_ => {
          row.isTest = state;
          $message.success('操作成功');
        })
      });
    },
    // 切换短信状态
    updateSendState: function (row) {
      let flag = row.isSend == 'TRUE';
      let isSend = flag ? 'FALSE' : 'TRUE';
      $confirm(flag ? '屏蔽短信后采购商将无法收到短信,确定要屏蔽吗?'
      : '确定开启采购商接收短信吗?', '提示').then(_ => {
        $post('/consumer/updateSendStatusBy', {
          guid: row.guid,
          isSend
        }).then(_ => {
          row.isSend = isSend;
          $message.success('操作成功');
        })
      });
    }
  }
  
  
  
  // 获取省份
  // const provinces = ref([{
  //   listKey: '',
  //   listValue: '全部'
  // }]);
  // const getProvinces = () => {
  //   $post('/v2/consumer/provinceList').then(res => {
  //     provinces.value = res.data;
  //     provinces.value.splice(0, 0, {
  //       listKey: '',
  //       listValue: '全部'
  //     })
  //   });
  // }
  // getProvinces();
  
  // 获取代理商
  const agents = ref([{
    listKey: '',
    listValue: '全部'
  }]);
  const getAgents = () => {
    $post('/v2/consumer/agentList', {
      provinceId: searchForm.provinceId
    }).then(res => {
      agents.value = res.data;
      agents.value.splice(0, 0, {
        listKey: '',
        listValue: '全部'
      })
    })
  }
  getAgents();
  // 修改代理商
  const changeAgent = () => {
    searchForm.areaId = '';
    searchForm.marketer = '';
    getAreas();
  }
  
  // 获取区域
  const areas = ref([{
    listKey: '',
    listValue: '全部'
  }]);
  const getAreas = () => {
    $post('/v2/consumer/areaList', {
      agentId: searchForm.agentId
    }).then(res => {
      areas.value = res.data;
      areas.value.splice(0, 0, {
        listKey: '',
        listValue: '全部'
      })
    })
  }
  // 修改区域
  const changeArea = () => {
    searchForm.marketer = '';
    getMarkers();
  }
  
  // 获取市场成员
  const marketers = ref([{
    listKey: '',
    listValue: '全部'
  }])
  const getMarkers = () => {
    $post('/v2/consumer/marketerList', {
      agentId: searchForm.agentId
    }).then(res => {
      marketers.value = res.data;
      marketers.value.splice(0, 0, {
        listKey: '',
        listValue: '全部'
      })
    })
  }
  
  // 获取购买人的类型
  const buyerTypes = ref([{
    listKey: '',
    listValue: '全部'
  }])
  $post('/v2/consumer/buyerType').then(res => {
    buyerTypes.value = res.data;
    buyerTypes.value.splice(0, 0, {
      listKey: '',
      listValue: '全部'
    })
  })
  
</script>

<style>
</style>
